import { useEffect, useState } from 'react';
import QRCode from 'qrcode';
import { PdfNodeFunc } from '../../../components';
import { NodeResizer, ResizeParams } from '@xyflow/react';
export const PdfQRCode: PdfNodeFunc = (node) => {
    const [dataUrl, setDataUrl] = useState('');
    const { data, selected } = node ?? {};
    const style = data?.style;
    const [width, setWidth] = useState(0);
    useEffect(() => {
        if (node?.width && node?.height) {
            setWidth(Math.min(node.width, node.height))
        }
    }, [node?.width, node?.height])
    useEffect(() => {
        const canvas = document.createElement('canvas');
        QRCode.toCanvas(canvas, data?.value ?? "wwww.baidu.com", {
            width,
            margin: 1,
            color: {
                dark: style?.color ?? "#52c41a",// data.fgColor,
                light: style?.backgroundColor ?? "#f5f5f5"//bgColor
            }
        }, () => {
            setDataUrl(canvas.toDataURL());
        });
    }, [data?.value, width]);
    return (<>
        <NodeResizer
            color="#1890ff"
            isVisible={selected}
            // minWidth={50}
            // minHeight={50}
            // keepAspectRatio={true} //保持高宽比
            onResize={(e: any, params: ResizeParams) => {
                setWidth(Math.min(params.width, params.height));
            }}
        />
        <img src={dataUrl}
            style={{ width, height: width, ...style }}></img>
    </>
    );
};
PdfQRCode.displayName = 'QRCode';
PdfQRCode.defaultProps = { width: 100, height: 100 };